<template>
  <layout :title-url="title">
    <xdh-layout>
      <div slot="west" class="west-box">
        <div class="west-box-bottom">
          <mod-title title="机关"></mod-title>
          <bar-two :series-data="twoData" :x-axis-data="twoXData"></bar-two>
        </div>
      </div>
      <div class="main-box">
        <div class="main-box-bottom">
          <js-map></js-map>
        </div>
      </div>
      <div slot="east" class="east-box">
        <div class="east-box-top">
          <js-count title="监察机关总数" count="1857123964"></js-count>
        </div>
        <div class="east-box-center">
          <mod-title title="数据分类统计"></mod-title>
          <js-pie :echart-data="jsPieData"></js-pie>
        </div>
        <div class="east-box-bottom">
          <mod-title title="注册资金"></mod-title>
          <pie-two :series-data="pieTwoData"></pie-two>
        </div>
      </div>
    </xdh-layout>
  </layout>
</template>

<script>
  import Layout from '../components/layout.vue'
  import XdhLayout from '../widgets/xdh-layout'
  import ModTitle from '../components/mod-title.vue'
  import BarTwo from '../components/bar-two'
  import JsMap from '../components/js-map.vue'
  import PieTwo from '../components/pie-two'
  import JsCount from '../components/js-count'
  import jsPie from '../components/js-pie'

  export default {
    name: 'supervise',
    components: {
      Layout,
      XdhLayout,
      ModTitle,
      BarTwo,
      JsMap,
      PieTwo,
      JsCount,
      jsPie
    },
    directives: {},
    mixins: [],
    data() {
      return {
        title: require('../assets/bigscreen/supervise-two-title.png'),
        twoData: [431123000, 332123000, 232123000, 132123000, 32123000, 22123000, 12123000, 10123000, 9123000, 8123000],
        twoXData: ['国家权力机关', '国家行政机关', '国家司法机关', '党政机关', '政协组织', '事业单位', '国有企业', '民营企业', '社会团体', '民办非企业单位'],
        jsPieData: [
          {value: 30, name: '法人独资'},
          {value: 30, name: '国有独资'},
          {value: 20, name: '外商投资'},
          {value: 30, name: '外商独资'},
          {value: 50, name: '自然人投资或控股'},
          {value: 40, name: '自然人独资'}
        ],
        pieTwoData: [
          {value: 21, name: '500万以下'},
          {value: 25, name: '500万-1000万'},
          {value: 30, name: '1000万-2000万'},
          {value: 24, name: '2000万-5000万'}
        ]
      }
    },
    computed: {},
    watch: {},
    methods: {},
    created() {
    }
  }
</script>

<style scoped lang="scss">
  .west-box {
    height: 100vh;
    &-bottom {
      height: 85%;
      padding-top: 20%;
      padding-bottom: 2%;
      padding-left: 2%;
    }
  }

  .main-box {
    height: 100vh;
    &-bottom {
      padding-top: 20%;
      height: 80%;
    }
  }

  .east-box {
    height: 100vh;
    &-top {
      height: 18%;
      padding-top: 20%;
    }
    &-center {
      height: 30%;
    }
    &-bottom {
      padding-top: 10%;
      height: 30%;
    }
  }
</style>
